img {
    display: block;
}
a {
    text-decoration: none;
}

html, body {
    height:100%;
    width:100%
}

.main {
    width:100%;
    height: 100%;
    position: relative;
    padding-left: 180px;       
    transition: all 1s;
    &.now {
        padding-left: 0px;
    }
    .left {
        position: absolute;
        width:180px;
        height: 100%;
        top:0px;
        left:0px;
        background-color: #222d32;
        transition: all 1s;
        &.now {
            left:-180px;    
        }
        .title {
            background-color: #367fa9;
            height:50px;
            width:100%;
            color: white;
            font-size: 26px;
            text-align: center;
            line-height: 50px;
        }
        .icon {
            width: 100%;
            height:180px;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            
            img {
                display: block;
                width: 80px;
                height: 80px;
                border-radius: 50%;
            }
            p {
                font-size: 18px;
                color:white;
                margin-top: 10px;
            }
        }
        .menu {
            width: 100%;
            padding:0;
            margin:0;
            .active {
                background-color: #1d1f21;
                border-left: 3px solid #0c5586;
            }
            li {
                width:100%;
                a {
                    width:100%;
                    padding-left: 30px;
                    display: block;
                    line-height: 40px;
                    color:white;
                    text-decoration: none;
                    border: 3px solid transparent;
                    box-sizing: border-box;
                    span {
                        margin-right: 10px;
                    }
                }
                .subMenu {
                    display: none;
                    a {
                        padding-left: 50px;
                    }
                }
            }
        }
    }
    .right {
        width:100%;
        height: 100%;
        .topbar {
            height:50px;
            width:100%;
            background-color: #3c8dbc;
            padding:0 20px;
            span {
                line-height: 50px;
                color: white;
                font-size: 16px;
            }
        }
        .breadcrumb {
            margin:20px;
        }
        .charts {
            height:400px;
            width: 100%;
            .bar {
                height:100%;
            }
            .pipe {
                height:100%;
            }
        }
    }
}

.modal {
    .modal-body {
        p {
            color: #800;
        }
    }
}